<template>
    <div class="Banner">
        <a-flex class="Content" style="padding: 16px 20px; height: 100%;" justify="space-between" :align="'center'">
            <div>
                <a-typography-title :level="3" style="margin:0 0 8px 0">Hi 您好!</a-typography-title>
                <a-typography-paragraph style="margin:0">你可以从这里开始创建应用～</a-typography-paragraph>
            </div>
            <a-button class="AddButton" :icon="h('span', { class: 'iconfont icon-add1 buttonIcon' })">创建应用</a-button>
        </a-flex>
    </div>

    <div class="Content">
        <div class="ContentLayout">
            <a-flex justify="space-between" :align="'center'">
                <a-typography-title :level="4" style="margin:0">
                    <img src="./TitleIcon.png" style="width:30px;margin-top: -2px;" alt="">
                    已创建应用
                </a-typography-title>
                <a-space :size="8">
                    <a-input-search v-model:value="SearchStr" enter-button placeholder="请输入查询条件"
                        style="width: 250px;" />
                    <a-segmented v-model:value="value2" style="margin:2px 0 0 0" :options="TypeLost">
                        <template #label="{ payload }">
                            <span class="TypeChange iconfont" :class="payload.class"></span>
                        </template>
                    </a-segmented>
                </a-space>
            </a-flex>
        </div>
        <div class="ContentLayout" v-if="value2 == 'grid'">
            <a-row :gutter="[16, 16]">
                <a-col :xs="24" :sm="12" :md="6">
                    <AppCard />
                </a-col>
                <a-col :xs="24" :sm="12" :md="6">
                    <AppCard />
                </a-col>
                <a-col :xs="24" :sm="12" :md="6">
                    <AppCard />
                </a-col>
                <a-col :xs="24" :sm="12" :md="6">
                    <AppCard />
                </a-col>
            </a-row>
        </div>
        <div class="ContentLayout" v-if="value2 == 'list'">
            <a-table :columns="columns" bordered :pagination="false" size="small" :data-source="data">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'icon'">
                        <div class="icon">
                            <span class="iconfont" :class="record.icon"></span>
                        </div>
                    </template>
                    <template v-else-if="column.key === 'state'">
                        <a-tag color="success">已上线</a-tag>
                    </template>
                    <template v-else-if="column.key === 'Action'">
                        <a-space :size="4">
                            <a-button type="link" size="small">编辑</a-button>
                            <a-button type="link" size="small">设置</a-button>
                            <a-button type="link" size="small" danger>删除</a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </div>
    </div>




</template>

<script setup>
import { h, ref } from 'vue';
import AppCard from './AppCard.vue'

const SearchStr = ref();
const value2 = ref('grid');
const TypeLost = ref([
    { payload: { class: 'icon-16gf-appsSmall', }, value: 'grid' },
    { payload: { class: 'icon-liebiao', }, value: 'list' }
])
const columns = [{
    title: '图标',
    dataIndex: 'icon',
    key: 'icon',
    width: '75px',
    align: 'center',
}, {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
}, {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    width: '80px',
    align: 'center',
}, {
    align: 'center',
    title: '最后更新',
    key: 'updateTime',
    dataIndex: 'updateTime',
    width: '160px',
}, {
    title: '操作',
    align: 'center',
    key: 'Action',
    width: '160px',
}];
const data = [{
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}, {
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}, {
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}, {
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}, {
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}, {
    key: '1',
    name: 'John Brown',
    icon: 'icon-liebiao',
    updateTime: '2024-01-01 01:01:01',
}];

</script>

<style lang="less" scoped>
::v-deep(.ant-tag) {
    margin-inline-end: 0px;
}

.icon {
    width: 40px;
    height: 40px;
    background-color: antiquewhite;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

    span {
        font-size: 20px;
    }
}

.buttonIcon {
    margin-top: -1px;
    margin-right: 8px;
}

.AddButton {
    display: flex;
}

.Banner {
    height: 120px;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(./app-hearder.png);
        background-size: 100% 100%;
        opacity: 0.4;
    }

    // filter: opacity(50%);
}

.Content {
    position: relative;
    padding: 16px 0;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

.ContentLayout {
    padding: 10px;
}
</style>